<template>
  <!-- 项目实施 - 弹窗表单内容 -->
  <div class="form-part">
    <el-card shadow="never" style="border: none;">
      <div class="form-part-header" v-if="showListTitle && formList && formList.length>0" slot="header">
        <span class="name">{{listTitle}}</span>
        <span v-if="tip" class="tip">{{tip}}</span>
      </div>
      <el-row class="form-part-content">
        <!-- 无下划线详情 -->
        <div v-if="modalTitle == 'TAB'">
          <el-col v-for="(i, idxI) in formList" :key="'formItem'+idxI" :span="i.span" class="custom-form-item doc">
            <p v-if="i.l" class="form-item-label"> {{i.l}} </p>
            <div v-if="i.type == 'doc'" class="form-item-value noline text">
              <img :src="i.docInfo.img.path" :width="i.docInfo.img.width" :height="i.docInfo.img.height" style="margin-left: 5px;">
              <span>{{i.docInfo.text}}</span>
            </div>
            <el-select v-else-if="i.type == 'select'" v-model="i.v" :placeholder="i.placeholder" :disabled="i.disabled">
              <el-option v-for="(j, idxJ) in i.option" :key="'option'+idxJ" :label="j.l" :value="j.v" :disabled="j.disabled"> {{j.l}}</el-option>
            </el-select>
            <div v-else-if="i.type == 'button'" class="form-item-value noline">
              <el-button style="margin-top: -5px;" size="mini" @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'colorText'" class="form-item-value noline">
              <el-tooltip v-if="i.v" :content="i.v" placement="bottom-start" effect="dark">
                <span :style="{'color': i.color, 'cursor':'default'}">{{i.v}}</span>
              </el-tooltip>
              <span v-else :style="{'color': i.color, 'cursor':'default'}">{{i.v}}</span>
            </div>
            <div v-else-if="i.type == 'roundButton'" class="form-item-value noline">
              <el-button size="mini" round @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'noLabelButton'" class="form-item-value noline nolabel" style="margin: 0 0 0 10px;">
              <el-button style="padding: 7px 10px;" size="mini" @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'progress'" class="form-item-value noline">
              <div class="form-item-value-progress">
                <el-tooltip v-if="i.v" :content="`${i.v} %`" placement="bottom-start" effect="dark">
                  <span> {{i.v}} % </span>
                </el-tooltip>
                <span v-else> 0 % </span>
                <el-progress :percentage="i.v ? parseInt(i.v) : 0" :show-text="false"></el-progress>
              </div>
            </div>
            <div v-else-if="i.type == 'noLabelProgress'" class="form-item-value noline">
              <div class="form-item-value-progress">
                <el-progress :percentage="parseInt(i.v)" :show-text="false"></el-progress>
              </div>
            </div>
            <div v-else-if="i.type == 'checkGroup'" class="form-item-value check-group noline" style="margin-top: 3px;">
              <el-checkbox v-for="(j, idxJ) in i.list" :label="j.l" :key="j.v" :checked="j.checked" :disabled="j.disabled">{{j.l}}</el-checkbox>
            </div>
            <div v-else-if="i.type == 'radioGroup'" class="form-item-value radio-group noline">
              <el-radio-group v-model="i.v">
                <el-radio v-for="(j, idxJ) in i.list" :label="j.l" :key="j.v" :checked="j.checked" :disabled="j.disabled">{{j.l}}</el-radio>
              </el-radio-group>
            </div>
            <div v-else-if="i.type == 'datePicker'" class="form-item-value datepicker" style="margin-top: 4px;">
              <el-date-picker type="date" align="right" size="mini" placeholder="选择日期" v-model="i.v" style="width: 100%;" clearable></el-date-picker>
            </div>
            <div v-else-if="i.type == 'unitInput'" class="form-item-value noline no-border ipt-unit-r">
              <span>{{i.v}}</span>
              <span>{{i.unit}}</span>
            </div>
            <div v-else class="form-item-value noline">
              <el-tooltip v-if="i.v" :content="i.v" placement="bottom-start" effect="dark">
                <span> {{i.v}} </span>
              </el-tooltip>
              <span v-else> {{i.v}} </span>
            </div>
          </el-col>
        </div>
        <!-- 带下划线详情 -->
        <div v-else-if="modalTitle == 'modalDetail'">
          <el-col v-for="(i, idxI) in formList" :key="'formItem'+idxI" :span="i.span" class="custom-form-item doc">
            <p v-if="i.type != 'roundButton' && i.type!='noLabelProgress'" class="form-item-label" :style="{'text-align': i.l == '~' ? 'center' : 'right'}"> {{i.l}} </p>
            <div v-if="i.type == 'doc'" class="form-item-value text"> 
              <img :src="i.docInfo.img.path" :width="i.docInfo.img.width" :height="i.docInfo.img.height">
              <span>{{i.docInfo.text}}</span>
            </div>
            <div v-else-if="i.type == 'button'" class="form-item-value">
              <el-button size="mini" @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'roundButton'" class="form-item-value noline">
              <el-button size="mini" round @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'inputBtnR'" class="form-item-value noline ipt-btn-r">
              <span>{{i.v}}</span>
              <el-button style="padding: 5px 6px;" round size="mini" @click="$emit('clickModalBtn', i.openModal)" plain> 查看 </el-button>
            </div>
            <div v-else-if="i.type == 'noLabelRoundButton'" class="form-item-value noline nolabel">
              <el-button size="mini" round @click="$emit('clickModalBtn', i.openModal)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'checkBox'" class="form-item-value noline">
              <el-checkbox v-model="i.checked"></el-checkbox>
            </div>
            <div v-else-if="i.type == 'progress'" class="form-item-value">
              <div class="form-item-value-progress">
                <span> {{i.v}} % </span>
                <el-progress :percentage="parseInt(i.v)" :show-text="false"></el-progress>
              </div>
            </div>
            <div v-else-if="i.type == 'noLabelProgress'" class="form-item-value nolabel-progress">
              <div class="form-item-value-progress nolabel">
                <el-progress :percentage="parseInt(i.v)" :show-text="false"></el-progress>
              </div>
            </div>
            <p v-else class="form-item-value"> {{i.v}} </p>
          </el-col>
        </div>
        <!-- 列表 -->
        <el-col v-else-if="modalTitle == 'TAB-TABLE'" :span="24">
          <cust-act-table
            ref="tabTableActDetail"
            tableType="tabTableActDetail"
            :list="formList[0].tableData"
            :colConfigs="formList[0].tableCol"
            @getDetail="getDetail"
            @changePage="changePage"
            :pageNum="page.pageNum"
            :pageSize="page.pageSize"
            :total="page.total"
            showIdx
            :showAct="true"
            rKey="index"
          ></cust-act-table>
        </el-col>
        <!-- 无操作列表 -->
        <el-col v-else-if="modalTitle == 'TAB-TABLE-NOACT'" :span="24">
          <cust-act-table
            ref="tabTableNoAct"
            class="tab-table-no-act"
            tableType=""
            :list="formList[0].tableData"
            :colConfigs="formList[0].tableCol"
            :showIdx="formList[0].tableData.length>0 ? true : false"
            :showAct="false"
            rKey="index"
          ></cust-act-table>
        </el-col>
        <!-- 查看 -->
        <div v-else-if="modalTitle == '查看'">
          <el-col v-for="(i, idxI) in formList" :key="'formItem'+idxI" :span="i.span" class="custom-form-item" style="display: inline-flex;">
            <p class="form-item-label" :style="{'text-align': i.l == '~' ? 'center' : 'right'}"> {{i.l}} </p>
            <el-tooltip v-if="i.v" :content="i.v" placement="bottom-start" effect="dark">
              <p class="form-item-value detail-text"> {{i.v}} </p>
            </el-tooltip>
            <p v-else class="form-item-value detail-text"> {{i.v}} </p>
          </el-col>
        </div>
        <!-- 弹窗可编辑表单 -->
        <div class="edit-form" v-else-if="modalTitle == 'EDIT-FORM'">
          <el-col v-for="(i, idxI) in formList" :key="'formItem'+idxI" :span="i.span" class="custom-form-item doc">
            <p v-if="i.l != ''" class="form-item-label" :style="{'text-align': i.l == '~' ? 'center' : 'right'}"> {{i.l}} </p>
            <div v-if="i.type == 'doc'" class="form-item-value noline text doc"> 
              <img :src="i.docInfo.img.path" :width="i.docInfo.img.width" :height="i.docInfo.img.height">
              <span>{{i.docInfo.text}}</span>
            </div>
            <div v-else-if="i.type == 'select'" class="form-item-value no-border sel">
              <el-select v-model="i.v" :placeholder="i.placeholder" :disabled="i.disabled">
                <el-option v-for="(j, idxJ) in i.option" :key="'option'+idxJ" :label="j.l" :value="j.v" :disabled="j.disabled"> {{j.l}}</el-option>
              </el-select>
            </div>
            <div v-else-if="i.type == 'inputIconR'" class="form-item-value ipt-icon-r">
              <el-input size="mini" v-model="i.v"></el-input>
              <img v-if="i.icon.path" :src="i.icon.path" :width="i.icon.width" :height="i.icon.height" style="cursor: pointer;">
            </div>
            <div v-else-if="i.type == 'colorText'" class="form-item-value" style="margin-top: 4px;">
              <el-tooltip v-if="i.v" :content="i.v" placement="bottom-start" effect="dark">
                <span :style="{'color': i.color, 'cursor':'default'}">{{i.v}}</span>
              </el-tooltip>
              <span v-else :style="{'color': i.color, 'cursor':'default'}">{{i.v}}</span>
            </div>
            <div v-else-if="i.type == 'unitInput'" class="form-item-value noline no-border ipt-unit-r">
              <el-input size="mini" v-model="i.v"></el-input>
              <span>{{i.unit}}</span>
            </div>
            <div v-else-if="i.type == 'input'" class="form-item-value no-border">
              <el-input size="mini" v-model="i.v"></el-input>
            </div>
            <div v-else-if="i.type == 'datePicker'" class="form-item-value datepicker" style="margin-top: 4px;">
              <el-date-picker type="date" align="right" size="mini" placeholder="选择日期" v-model="i.v" style="width: 100%;" clearable></el-date-picker>
            </div>
            <div v-else-if="i.type == 'noLabelButton'" class="form-item-value noline nolabel" style="margin: 0 0 0 10px;">
              <el-button size="mini" @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'inputBtnR'" class="form-item-value noline ipt-btn-r">
              <el-input size="mini" v-model="i.v"></el-input>
              <el-button style="padding:5px 6px;" round size="mini" @click="$emit('clickModalBtn', i.openModal)" plain> 查看 </el-button>
            </div>
            <div v-else-if="i.type == 'button'" class="form-item-value noline">
              <el-button size="mini" @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'roundButton'" class="form-item-value noline">
              <el-button size="mini" round @click="$message.info(i.v)" plain>{{i.v}}</el-button>
            </div>
            <div v-else-if="i.type == 'progress'" class="form-item-value noline">
              <div class="form-item-value-progress">
                <span> {{i.v}} % </span>
                <el-progress :percentage="parseInt(i.v)" :show-text="false"></el-progress>
              </div>
            </div>
            <div v-else-if="i.type == 'noLabelProgress'" class="form-item-value noline">
              <div class="form-item-value-progress">
                <el-progress :percentage="parseInt(i.v)" :show-text="false"></el-progress>
              </div>
            </div>
            <div v-else-if="i.type == 'checkGroup'" class="form-item-value check-group noline">
              <el-checkbox v-for="(j, idxJ) in i.list" :label="j.l" :key="j.v" :checked="j.checked" :disabled="j.disabled">{{j.l}}</el-checkbox>
            </div>
            <div v-else-if="i.type == 'radioGroup'" class="form-item-value radio-group noline" style="margin-top: 5px;">
              <el-radio-group v-model="i.v">
                <el-radio v-for="(j, idxJ) in i.list" :label="j.l" :key="j.v" :checked="j.checked" :disabled="j.disabled">{{j.l}}</el-radio>
              </el-radio-group>
            </div>
            
            <p v-else-if="i.type == 'textR'" class="form-item-value noline" style="width: 3em;text-align: right;"> {{i.v}} </p>
            <p v-else class="form-item-value"> {{i.v}} </p>
          </el-col>
        </div>
        <!-- 弹窗可编辑列表 -->
        <div v-else-if="modalTitle == 'EDIT-TABLE'" class="custom-form-table">
          <div v-if="formList[0].btns" class="custom-form-table-btns">
            <div class="btn-item" v-for="(j, idxJ) in formList[0].btns" :key="'btn'+idxJ">
              <el-button v-if="j == '新建'" size="mini" icon="el-icon-plus" @click="$message.info(j)" type="primary"> {{j}} </el-button>
              <el-button v-if="j == '多选任务'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon1.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '多选费用'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon1.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '选择费用类型'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon1.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '复制'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon5.png')" width="14px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '删除'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon2.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '删除全部'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon3.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-button v-if="j == '导入数据'" size="mini" @click="$message.info(j)" plain> <img :src="require('../images/modal-btn-icon4.png')" width="13px" height="14px"> {{j}} </el-button>
              <el-dropdown v-if="j == '更多'" trigger="click" size="mini">
                <span style="font-size: 12px;">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button size="mini" class="dropdown-btn" @click="$message.info('删除全部')" plain> 
                      <img :src="require('../images/modal-btn-icon3.png')" width="14px" height="14px">
                      <i>删除全部</i> 
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <cust-act-table
            ref="editTable"
            class="edit-table"
            tableType="editTable"
            :list="formList[0].tableData"
            :colConfigs="formList[0].tableCol"
            :showIdx="formList[0].tableData.length>0 ? true : false"
            @boxClick="boxClick"
            :showAct="false"
            :pagin="false"
            rKey="index"
          ></cust-act-table>
        </div>
        <!-- 新增、编辑 -->
        <el-form v-else ref="form" :model="form">
          <el-col v-for="(i, idxI) in formList" :key="'formItem'+idxI" :span="i.span">
            <el-form-item :label="i.l">
              <el-input v-if="!i.type" v-model="i.v" :disabled="i.disabled"></el-input>
              <el-select v-if="i.type == 'select'" v-model="i.v" :placeholder="i.placeholder" :disabled="i.disabled">
                <el-option v-for="(j, idxJ) in i.option" :key="'option'+idxJ" :label="j.l" :value="j.v" :disabled="j.disabled"> {{j.l}}</el-option>
              </el-select>
              <img class="form-right-icon" v-if="i.img" :src="i.img.path" :width="i.img.width ? i.img.width : '100%'" :height="i.img.height ? i.img.height : 'auto'">
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import custActTable from "./custActTable.vue";
export default {
  name: "formPart",
  components: { custActTable },
  props: {
    // 小标题名称
    listTitle: {
      type: String,
      default: () => ''
    },
    // 提示 
    tip: {
      type: String,
      default: () => ''
    },
    btns: {
      type: Array,
      default: () => []
    },
    // 判断回显内容类型
    modalTitle: {
      type: String,
      default: () => ''
    },
    // 回显表单内容
    formList: {
      type: Array,
      default: () => []
    },
    showListTitle: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      form: {},
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
    }
  },
  watch: {
    formList: {
      handler(n, o) {},
      deep: true,
      immediate: true
    },
    modalTitle(n) {}
  },
  methods: {
    /**
     * @author Wrl
     * 点击列表单元格
     */
    boxClick(e) {
      this.$emit('clickModalBtn', e)
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 点击列表 - 查看
     */
    getDetail() {
      this.$emit('tableAct', true)
    },
  }
}
</script>
<style lang="scss" scoped>
  .form-part {
    width: 100%;
    ::v-deep {
      .el-card__header {
        border-bottom: 2px solid rgb(204, 204, 204);
      }
    }
    &-header {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      .name {
        display: inline-flex;
        font-size: 14px;
        font-weight: bold;
        font-family: "Microsoft YaHei";
        justify-content: flex-start;
        align-items: center;
        &::before {
          content: "";
          width: 4px;
          height: 16px;
          background: #11A389;
          display: block;
          border-radius: 2px;
          margin-right: 8px;
        }
      }
      .tip {
        font-size: 10px;
        color: #008000;
      }
    }
    &-content {
      ::v-deep {
        .el-form-item__label {
          font-size: 12px;
          color: #666666;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
          margin-left: 0;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .form-right-icon {
        margin-left: 8px;
      }
    }
    .custom-form-item {
      font-size: 12px;
      height: 40px;
      box-sizing: content-box;
      &.doc {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      p {
        margin: 5px 0;
        // box-sizing: content-box;
      }
      .form-item-label {
        color: #666666;
        min-width: 5.5em;
        text-align: right;
        float: left;
        padding: 5px 0;
      }
      .form-item-value {
        width: calc(100% - 6.5em);
        float: left;
        color: #333333;
        text-align: left;
        border-bottom: 1px solid #d4d4d4;
        padding: 5px 0;
        margin-left: 1em;
        height: 14px;
        &.noline.nolabel {
          ::v-deep {
            .el-button {
              padding: 3px 5px;
              margin: -3px auto 0;
            }
          }
        }
        &.noline {
          border-bottom: 0;
        }
        &.nolabel {
          width: 100%;
          text-align: center;
          margin: -10px 0 0 -3em;
          ::v-deep {
            .el-button.is-round {
              padding: 7px 10px;
            }
          }
        }
        &.ipt-btn-r {
          span {
            display: inline-block;
            height: 18px;
            width: calc(100% - 50px);
            border-bottom: 1px solid #d4d4d4;
          }
          ::v-deep {
            .el-input {
              width: calc(100% - 50px);
              border-bottom: 1px solid #d4d4d4;
              .el-input__inner {
                height: 25px;
                border: none;
                background: transparent;
              }
            }
          }
        }
        &.nolabel-progress {
          width: 100%;
          margin: 0 0 0 10px;
          padding: 0;
          height: 24px;
        }
        &.text {
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;
          color: #11A389;
          // padding: 5px 10px;
          font-size: 12px;
          margin: 5px 0 5px 1em;
          cursor: pointer;
          background: rgba(17, 163, 136, 0.15);
          span {
            margin-left: 6px;
          }
        }
        &-progress {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 24px;
          ::v-deep {
            .el-progress {
              width: 80%;
              margin-left: 10px;
              .el-progress-bar {
                .el-progress-bar__outer {
                  background-color: rgba(164, 204, 209, 0.19);
                  border: 1px solid #f0f0f0;
                  height: 10px;
                }
                .el-progress-bar__inner {
                  background: linear-gradient(to right, #bbffaa, rgba(17, 163, 132,0.96));
                }
              }
            }
          }
          &.nolabel {
            width: 100%;
            ::v-deep .el-progress {
              width: 100%;
            }
          }
        }
        &.datepicker {
          margin-top: 2px;
          border-bottom: 1px solid #d4d4d4;
          ::v-deep {
            .el-date-editor {
              .el-input__inner {
                margin-top: -5px;
                width: calc(100% - 25px);
                border: none;
                padding: 2px 4px;
                border-radius: 0;
                background: transparent;
                height: 20px;
              }
              .el-input__prefix {
                right: 0;
                top: -5px;
                left: auto;
                text-align: right;
                i {
                  color: #11A389;
                  font-size: 14px;
                }
              }
              .el-input__suffix {
                top: -5px;
                right: 15px;
                i {
                  color: #11A389;
                  font-size: 14px;
                }
              }
            }
          }
        }
        &.check-group {
          display: inline-flex;
          margin-top: 8px;
          ::v-deep {
            .el-checkbox {
              margin-right: 10px;
              display: inline-flex;
              align-items: center;
              .el-checkbox__label {
                padding-left: 5px;
              }
            }
          }
        }
        &.radio-group {
          ::v-deep {
            .el-radio-group {
              display: inline-flex;
              align-items: center;
              .el-radio {
                font-size: 12px;
                margin-right: 10px;
                display: inline-flex;
                align-items: center;
                .el-radio__label {
                  font-size: 12px;
                  padding-left: 5px;
                }
              }
            }
          }
        }
        &.no-border {
          height: 20px;
          ::v-deep .el-input {
            .el-input__inner {
              border: none;
              background: transparent;
            }
          }
        }
        &.no-border.sel {
          ::v-deep .el-input {
            .el-input__inner {
              margin-top: -4px;
              font-size: 12px;
            }
          }
        }
        &.ipt-unit-r {
          display: inline-flex;
          align-items: flex-end;
          ::v-deep {
            .el-input {
              border-bottom: 1px solid #d4d4d4;
              width: calc(100% - 2em);
              height: 22px;
              .el-input__inner {
                background: transparent;
              }
            }
          }
        }
        &.ipt-icon-r {
          width: calc(100% - 20px);
          height: 26px;
          padding: 0;
          // border: none;
          display: inline-flex !important;
          align-items: center;
          justify-content: flex-start;
          img {
            margin-top: 2px;
          }
          ::v-deep {
            .el-input {
              // border-bottom: 1px solid #d4d4d4;
              margin-top: -3px;
              .el-input__inner {
                padding-top: 6px;
                border: none;
                background: transparent;
              }
            }
          }
        }
        &.detail-text {
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          overflow: hidden;
          -webkit-box-orient: vertical;
          display: -webkit-box;
        }
        ::v-deep {
          .el-select__caret {
            font-size: 10px;
            &.is-reverse {
              margin-top: -5px;
            }
          }
          .el-tooltip {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .edit-form {
      .custom-form-item {
        .form-item-value {
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .custom-form-table {
      &-btns {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        .btn-item {
          margin-right: 6px;
          margin-bottom: 10px;
          ::v-deep {
            .el-dropdown-menu__item {
              font-size: 12px;
            }
            .el-button--mini {
              padding: 7px 10px;
              span {
                display: inline-flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: 2px;
                img {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
    ::v-deep {
      .tab-table-no-act {
        .el-table__body tr {
          cursor: unset;
        }
      }
    }
  }
  ::v-deep .el-dropdown-menu__item {
    font-size: 12px;
    .el-button--mini {
      padding: 7px 10px;
      span {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 2px;
      }
    }
    i {
      margin: 2px 0 0 5px;
      font-style: normal;
    }
  }
</style>
